<!DOCTYPE html>
<html >

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单管理</title>

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/assets/materialize/css/materialize.min.css" media="screen,projection" />
    <!-- Bootstrap Styles-->
    <link href="/assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="/assets/js/Lightweight-Chart/cssCharts.css">
</head>

<body>
    <div id="wrapper">
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle waves-effect waves-dark" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand waves-effect waves-dark" href="index.html"><i class="large material-icons">insert_chart</i> 
				<strong>CGB2012</strong></a>
				
		<div id="sideNav" href=""><i class="material-icons dp48">toc</i></div>
            </div>

            <ul class="nav navbar-top-links navbar-right"> 
				<li><a class="dropdown-button waves-effect waves-dark" href="#!" data-activates="dropdown4"><i class="fa fa-envelope fa-fw"></i> <i class="material-icons right">arrow_drop_down</i></a></li>				

				  <li><a class="dropdown-button waves-effect waves-dark" href="#!" data-activates="dropdown1"><i class="fa fa-user fa-fw"></i> <b>John Doe</b> <i class="material-icons right">arrow_drop_down</i></a></li>
            </ul>
        </nav>
		<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">

<li><a href="/CGB_login.html"><i class="fa fa-sign-out fa-fw"></i> 退出</a>
</li>
</ul>


<ul id="dropdown4" class="dropdown-content dropdown-tasks w250">
  <li>
                            <a href="#">
                                <div>
                                    <strong>John Doe</strong>
                                    <span class="pull-right text-muted">
                                        <em>Today</em>
                                    </span>
                                </div>
                                <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                            </a>
                        </li>
                        <li class="divider"></li>
                      
</ul>  
	   <!--/. NAV TOP  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a class="waves-effect waves-dark" href="CGB_index.html"><i class="fa fa-dashboard"></i> 首页</a>
                    </li>
                    <li>
                        <a href="CGB_dept.html" class="waves-effect waves-dark"><i class="fa fa-desktop"></i> 部门管理</a>
                    </li>
                    <li>
                        <a href="CGB_menu.html" class="active-menu waves-effect waves-dark"><i class="fa fa-bar-chart-o"></i> 菜单管理</a>
                    </li>
                    <li>
                        <a href="CGB_roles.html" class="waves-effect waves-dark"><i class="fa fa-qrcode"></i> 角色管理</a>
                    </li>
                    
                    <li>
                        <a href="CGB_user.html" class="waves-effect waves-dark"><i class="fa fa-table"></i> 用户管理</a>
                    </li>
                    <li>
                        <a href="CGB_logs.html" class="waves-effect waves-dark"><i class="fa fa-edit"></i> 日志管理 </a>
                    </li>


                    <li>
                        <a href="#" class="waves-effect waves-dark"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="#">Second Level Link</a>
                            </li>
                            <li>
                                <a href="#">Second Level Link</a>
                            </li>
                            <li>
                                <a href="#">Second Level Link<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Link</a>
                                    </li>

                                </ul>

                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="CGB_changePassword.html" class="waves-effect waves-dark"><i class="fa fa-fw fa-file"></i> 修改密码</a>
                    </li>
                </ul>

            </div>

        </nav>
        <!-- /. NAV SIDE  -->
      
		<div id="page-wrapper">
		  <div class="header"> 
                        <h1 class="page-header">
                            菜单管理
                        </h1>
						<ol class="breadcrumb">
					  <li><a href="#">menu</a></li>

                        </ol>
          </div>
		</div>
		<div id="page-inner">
		   
		<div class="row">
		    <div class="col-md-12">
		        <!-- Advanced Tables -->
		        <div class="card" id="menuApp">
					<div v-show="listMenuDiv"><!-- 内容展示区 -->
		            <div class="card-action" >
		                 系统菜单管理表
		            </div>
		            <div class="card-content">
		                <div class="table-responsive">
		                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
		                        <thead>
		                            <tr>

									                   <th class="center">序号</th>
									                   <th class="center">菜单名</th>
									                   <th class="center">url</th>
									                   <th class="center">权限标识</th>
									                   <th class="center">创建时间</th>
									                   <th class="center">操作</th>
		                            </tr>
		                        </thead>
		                        <tbody>
		                            <tr v-for="(n,i) in getList1" :key="i">
										                <td class="center">{{i+1}}</td>
										                <td class="center">{{n.menuId}}</td>
										                <td class="center">{{n.url}}</td>
										                <td class="center">{{n.permission}}</td>
										                <td class="center">{{n.createdTime}}</td>
										                <td class="center">
 										                    <button @click="doFindById(n.id)">修改</button>
															<button @click="doDeleteById(n.id)">删除</button>
										                </td>
									</tr>
		                        </tbody>
		                    </table>
				
							<div >
								<button type="button" class="pre " @click="doJumpToPage" >上一页</button>
								<button>{{pageCurrent}}/{{pageCount}}</button>
								<button type="button" class="next" @click="doJumpToPage">下一页</button>
								<form style="display: inline;">
									<input type="text" name="pageCurrent" id="pageNumId" />
									<input type="button" value="跳转" class="jump" @click="doJumpToPage" />
								</form>
							</div>
							
		                </div>
		            </div>
					</div>
					
					<div v-show="editMenuDiv"><!-- style="display: none" -->
					<form>
						<input type="hidden" id="id" v-model="id"/>
						<div>
							<label >菜单名: </label>
							<input type="text" v-model="menuId" placeholder="menuId"/>
						</div>
						<button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">提交</button>
						<button type="button" class="btn btn-default cancel" @click="doCancel">取消</button>
						       
					</form>
					</div>
					
		        </div>

					


<!--/.row-->
			
		

						
					
                <!-- /. ROW  -->

            

                    </div>
                </div>
                <!-- /. ROW  -->
			   <div class="fixed-action-btn horizontal click-to-toggle">
    <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
    </a>
    <ul>
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>
		

            </div>
            <!-- /. PAGE INNER  -->
        </div>
        <!-- /. PAGE WRAPPER  -->
    </div>

    <!--    <script src="assets/js/jquery-1.10.2.js"></script>-->
    <!--    <script src="assets/js/bootstrap.min.js"></script>-->
    <!--	<script src="assets/materialize/js/materialize.min.js"></script>-->
    <!--    <script src="assets/js/jquery.metisMenu.js"></script>-->
    <!--    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>-->
    <!--    <script src="assets/js/morris/morris.js"></script>-->
    <!--	<script src="assets/js/easypiechart.js"></script>-->
    <!--	<script src="assets/js/easypiechart-data.js"></script>-->
    <!--	 <script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>-->
    <!--    <script src="assets/js/custom-scripts.js"></script>-->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
	 var vm=new Vue({
		 el:"#menuApp",
		 data:{
			 getList1:[],
			 id:"",
			 menuId:"",
			 url:"",
			 permission:"",
			 createdTime:"",
			 pageCurrent:1,
			 pageCount:0,
			 listMenuDiv:true,
			 editMenuDiv:false
		 },
		 methods:{
			 doShowOrHide(){
			     this.listNoticeDiv=false;
			     this.editNoticeDiv=true;
			 },
			doCancel(){
			     this.listNoticeDiv=true;
			     this.editNoticeDiv=false;
			 },
			 doFindById(){
				 let url=`http://localhost/menu/${id}`;
				 axios.get(url)
				 .then(function(response){
					 let jsonResult=response.data;
					 if(jsonResult.state==1){
						 this.id=jsonResult.data.id;
						 this.menuId=jsonResult.data.menuId;
						 this.url=jsonResult.data.url;
						 this.permission=jsonResult.data.permission;
						 this.createdTime=jsonResult.data.createdTime;
						 this.doGetMenu();
					 }else{
						 alert(jsonResult.message);
					 }
				 })
			 },
			 doDeleteById(id){
				 let url=`http://localhost/menu/${id}`;
				 axios.delete(url)
				 .then(function(response){
					 let jsonResult=response.data;
					 if(jsonResult.state==1){
						 alert(jsonResult.message);
						 let rows=document.querySelectorAll("table>tbody>tr").length;
						 if(this.pageCurrent>1 && this.pageCurrent==this.pageCount && rows==1){
							 this.pageCurrent--;
						 }
						 this.doGetMenu();
					 }else{
						 alert(jsonResult.message);
					 }
				 })
			 },
			 doSaveOrUpdate(){
				 let url="http://localhost/menu/";
				 let params={
					 "id":this.id,
					 "menuId":this.menuId
				 };
				 axios({
					 method:this.id?"put":"post",
					 url: url,
					 data: params
				 }).then(function(response){
					 let jsonResult=response.data;
					 if(jsonResult.state==1){
						 alert("save ok");
						 this,doGetMenu();
						 this.resetForm();
						 this.doCancel()
					 }else{
						 alert(jsonResult.message);
					 }
				 })
			 },
			 resetForm(){
				this.id="",
				 this.menuId=""
			 },
			 doJumpToPage(event){
				 let cls=event.target.getAttribute("class");
				 if(cls=="pre"&&this.pageCount>1){
					 this.pageCurrent--;
				 }else if(cls=="next"&&this.pageCurrent<this.pageCount){
					 this.pageCount++;
				 }else if(cls=="jump"){
					 let input=document.querySelector("#pageNumId");
					 let pageNum=input.value;
					 if(pageNum<1 || pageNum>this.pageCount){
						 alert("页码值不合法");
						 return;
					 }
					 this.pageCurrent=pageNum;
				 }else{
					 return
				 }
				 this.doGetMenu();
			 },
			 doGetMenu(){
				 let url=`http://localhost/menu/`;
				 axios.get(url)
				 .then(function(response){
					 let jsonResult=response.data;
					 this.vm.getList1=jsonResult.data.list;
					 this.vm.pageCurrent=jsonResult.data.pageNum;
					 this.vm.pageCount=jsonResult.data.pages;
				 })
			 }
			 
		 },
		 mounted() {
		 	this.doGetMenu();
		 }
	 })
 </script>

</body>

</html>